/**
 * 隐性成本图
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'

const ImCostChart=({
	data:{
		xaixs,
		data
	}
	})=>{
		const maxData=data.find(item=>item.name==='max').data,
					minData=data.find(item=>item.name==='min').data,
					avgData=data.find(item=>item.name==='avg').data;
		const maxAbs=[],minAbs=[],diff=[]
		maxData.map((item,i)=>{
			maxAbs[i]=maxData[i]
			minAbs[i]=minData[i]
			if(minData[i]<0&&maxData[i]<0){
				if(Math.abs(maxData[i])<Math.abs(minData[i])){
					maxAbs[i]=minData[i]
					minAbs[i]=maxData[i]
				}
				diff[i]=(minData[i]*1000-maxData[i]*1000)/1000
			}else if(minData[i]<0&&maxData[i]>0){
				diff[i]=maxData[i]
			}else if(minData[i]>=0&&maxData[i]>=0){
				diff[i]=(maxData[i]*1000-minData[i]*1000)/1000
			}
		})
		const myProps= {
			option: {
				grid: {
					top:'8%',
					right:'3%',
					bottom:'5%',
					left:'3%',
					containLabel: true,
					borderColor:"#f6f7f9"
				},
				xAxis: {
					type: 'category',
					splitLine: {
						show: false
					},
					axisLine:{
						show:false
					},
					axisTick:{
						show:false
					},
					nameTextStyle:{
						color:'#f00',
						fontSize:8
					},
					data: xaixs
				},
				yAxis: {
					type: 'value',
					axisLine:{
						show:false
					},
					axisTick:{
						show:false
					},
					nameTextStyle:{
						color:'#f00',
						fontSize:8
					}
				},
				series:data.map((item,i)=>{
					if(item.name==='avg'){
						return({
							name: item.name,
							type: 'scatter',
							itemStyle: {
								normal: {
									color: '#4990e2'
								},
								emphasis: {
									color: '#4990e2'
								}
							},
							data: avgData
						})
					}else if(item.name==='max'){
						return({
							name: item.name,
							type: 'bar',
							stack: '总量',
							barWidth: 4,

							itemStyle: {
								normal: {
									barBorderColor: 'rgba(0,0,0,0)',
									color: function (params){
										if(params.data>0){
												 return 'rgba(0,0,0,0)'
										 }else{
												 // return 'rgba(255,0,0,1)'
												 if(maxAbs[params.dataIndex]<0){
															return 'rgba(0,0,0,0)'
												 }else{
														return '#ff9b00'
												 }
										 }
									}
								}
							},
							// label: {
							//   normal: {
							//     show: true,
							//     position: 'top'
							//   }
							// },
							data: minAbs
						})
					}else{
						return({
							name: item.name,
							type: 'bar',
							stack: '总量',
							barWidth: 4,
							itemStyle: {
								normal: {
									barBorderColor: 'rgba(0,0,0,0)',
									color: function (params){
										if(params.data>0){
													return '#ff9b00'
											}else{
													if(minAbs[params.dataIndex]<0){
															return '#ff9b00'

													}else{
															return 'rgba(0,0,0,0)'
													}

											}
									}
								}
							},

							// label: {
							//   normal: {
							//     show: true,
							//     position: 'bottom'
							//   }
							// },
							data: diff
						})
					}
				})
			}
	  }

	return (
		<div className={`chart ${style.imCostChart}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)

}

ImCostChart.propTypes={
	// data
}

export default ImCostChart
